<template>
  <div class="footer_bar">
    <div class="itembar" v-for='(item, index) in sort' :key='index'>
      <!-- <span :class="currentId === item.id ? 'active' : ''">{{item.title}}</span> -->
      <router-link :to="{name: item.name}">
          <div :class="currentName === item.name ? 'active' : ''" @click='changeFooterBar(item)'>{{item.title}}</div>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      sort: [
        {
          title: '首页',
          name: 'home'
        },
        {
          title: '商城',
          name: 'market'
        },
        {
          title: '直播',
          name: 'live'
        },
        {
          title: '我',
          name: 'my'
        }
      ],
      currentName: 'home'
    }
  },
  methods: {
    changeFooterBar (value) {
      this.currentName = value.name
    }
  }
}
</script>
<style lang='less' scoped>
.footer_bar{
  width: 100%;
  height: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  color: rgb(102, 102, 102);
  display: flex;
  justify-content: flex-start;
  .itembar{
    width: 25%;
    height: 100%;
  }
  .active{
    color: rgb(255, 63, 120);
  }
}
</style>
